<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>Phaser - Creando tu primer juego, parte 9</title>
	<script type="text/javascript" src="js/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var player;
var platforms;
var cursors;

var stars;
var score = 0;
var scoreText;

function create() {

    // Un fondo simple para nuestro juego
    game.add.sprite(0, 0, 'sky');

    //  El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
    platforms = game.add.group();

    // Aquí creamos el suelo
    var ground = platforms.create(0, game.world.height - 64, 'ground');

    // Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
    ground.scale.setTo(2, 2);

    //  Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
    ground.body.immovable = true;

    //  Creamos las dos plataformas
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;

    ledge = platforms.create(-150, 250, 'ground');
    ledge.body.immovable = true;

    // El jugador y su configuración
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 6; //gravedad
    player.body.collideWorldBounds = true; //choque con los bordes del juego

    // Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    
    // Añadimos un grupo para meter las estrellas
    stars = game.add.group();

    //  Creamos 12 estrellas y las esparcimos por el escenario
    for (var i = 0; i < 12; i++)
    {
        //  Creamos una estrella dentro del grupo 'stars'
        var star = stars.create(i * 70, 0, 'star');

        //  Le aplicamos gravedad
        star.body.gravity.y = 6;

        //  ..y un cierto valor de rebote
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }

    //  Añadimos el marcador de la puntuación
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

    //  Los controles del jugador con teclado
    cursors = game.input.keyboard.createCursorKeys();
    
}

function update() {

    //  Hacer que el jugador y las estrellas colisionen con las plataformas
    game.physics.collide(player, platforms);
    game.physics.collide(stars, platforms);

    // Comprobar si el jugador se solapa con alguna estrella. Si es así, llamamos a la función 'collectStar'
    game.physics.overlap(player, stars, collectStar, null, this);

    //  Resetear la velocidad del jugador (movimiento)
    player.body.velocity.x = 0;

    if (cursors.left.isDown) //si se presiona la tecla izda..
    {
        //  Mover a la izquierda
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown) //si se presiona derecha..
    {
        //  Mover a la derecha
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  sino, quedarse quieto
        player.animations.stop();

        player.frame = 4;
    }
    
    //  Si se presiona la tecla arriba y el jugador está tocando el suelo, que salte
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }
}

function collectStar (player, star) {
    
    // Elimina la estrella del juego
    star.kill();

    //  E incrementa y actualiza la puntuación
    score += 10;
    scoreText.content = 'Score: ' + score;

}

</script>

</body>
</html>